<!DOCTYPE html>
<html>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>39jQuery淡入淡出动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            background: red;
            display: none;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.12.4.js" 
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
    <script>
        $(function (param) { 
            $("button").eq(0).click(function (param) {  
                $("div").fadeIn(1000,function (param) { 
                    alert("淡入完毕！");
                 });
            });
            $("button").eq(1).click(function (param) {  
                $("div").fadeOut(1000,function (param) { 
                    alert("淡出完毕！");
                 });
            });
            $("button").eq(2).click(function (param) {  
                $("div").fadeToggle(1000,function (param) { 
                    alert("切换完毕！");
                 });
            });
            $("button").eq(3).click(function (param) {  
                $("div").fadeTo(1000,0.2,function (param) {  
                    alert("淡入完毕");
                });
            });
         });
    </script>
    <body>
        <button>淡入</button>
        <button>淡出</button>
        <button>切换</button>
        <button>淡入到</button>
        <div></div>
    </body>
</html>